<template>
  <view class="fu-number-scroll">
    <view 
      v-for="(digit, index) in digits" 
      :key="index"
      class="fu-number-scroll__digit"
    >
      <view 
        class="fu-number-scroll__wrapper"
        :style="{ 
          transform: `translateY(${-digit * 10}%)`,
          transitionDelay: `${index * delay}s`,
          transitionDuration: `${duration}s`
        }"
      >
        <text v-for="n in 10" :key="n">{{ n - 1 }}</text>
      </view>
    </view>
  </view>
</template>

<script>
/**
 * fu-number-scroll 数字滚动组件
 * @description 用于数字的滚动动画展示
 * @property {Number/String} value - 要展示的数字
 * @property {Number} duration - 动画时长，单位秒
 * @property {Number} delay - 数字间的延迟时间，单位秒
 */
export default {
  name: 'fu-number-scroll',
  props: {
    value: {
      type: [Number, String],
      default: 0
    },
    duration: {
      type: Number,
      default: 1
    },
    delay: {
      type: Number,
      default: 0.1
    }
  },
  data() {
    return {
      isInitial: true
    }
  },
  computed: {
    // 将数字拆分为单个数字数组
    digits() {
      return String(this.value)
        .split('')
        .map(Number)
    }
  },
  watch: {
    value: {
      immediate: true,
      handler() {
        if (this.isInitial) {
          // 初次渲染时不需要动画
          this.$nextTick(() => {
            setTimeout(() => {
              this.isInitial = false
            }, 0)
          })
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.fu-number-scroll {
  display: inline-flex;
  overflow: hidden;
  font-size: 32rpx;
  line-height: 1.5;
  color: var(--fu-text-color);
  
  &__digit {
    width: 0.6em;
    height: 1em;
    overflow: hidden;
  }
  
  &__wrapper {
    display: flex;
    flex-direction: column;
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    
    text {
      width: 0.6em;
      height: 1em;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style> 